<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
	  html { height: 100% }
	  body { height: 100%; margin: 0; padding: 0 }
	  #map_canvas { height: 100% }
	</style>
	<link rel="stylesheet" type="text/css" href="css/tourist.css" />
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBls6QNYjNYpB0ZdquOSvfI4ngGsh05DOk&sensor=false"></script>
	<script type="text/javascript">
		function init(){
			var pos = new google.maps.LatLng(42.345573,-71.098326);
			var mapOptions = {
				  center: pos,
				  zoom: 14,
				  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(document.getElementById("pano2"), mapOptions);
			var panoramaOptions = {
			  position: pos,
			  pov: {
			    heading: 34,
			    pitch: 10,
			    zoom: 1
			  }
			};
			var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano1"), panoramaOptions);
			map.setStreetView(panorama);
		}
	</script>
	<script type="text/javascript" src="scripts/tourist.js"></script>
	</head>
	<body onload="init()">
		<div class="goa-body">
			<!--  header  -->
			<div class="goa-header">
        		<a href="http://maps.google.cn"><img alt="Google 地图" src="http://www.google.cn/intl/zh-CN/images/logos/maps_logo.gif"></a>
        		<ul class="goa-menu">
			        <li class="goa-menu-first"><a href="#">首页</a></li>
					<li class="goa-menu-second"><a href="#">了解</a></li>
					<li class="goa-menu-first"><a href="#">首页</a></li>
					<li class="goa-menu-second"><a href="#">了解</a></li>
            	</ul>
			</div>
			<!-- content -->
			<div class="goa-content">
				<!--  left navigator -->
				<div class="goa-section">
					<div class="goa-section-first">您可以在街景视图中游览世界各地的标志性建筑。点击“在‘Google 地图’中查看此地点”(See this spot in Google Maps)可以继续探索标志性建筑及其周边地区。</div>
					<div class="goa-section-second">
						<a href="http://maps.google.cn/maps?f=q&amp;source=embed&amp;hl=zh-CN&amp;geocode=&amp;sll=51.505176,-0.077205&amp;sspn=0.005269,0.010933&amp;ie=UTF8&amp;radius=0.24&amp;rq=1&amp;ev=zi&amp;hq=Tower+Bridge,&amp;hnear=&amp;ll=51.505176,-0.077205&amp;spn=0.005269,0.010933&amp;layer=c&amp;cbll=51.506698,-0.074566&amp;panoid=JuDuqk8alzBWI-SWy9UwkA&amp;cbp=12,201.9,,0,-8.95" id="gallery-cta">在“Google地图”中查看此地点</a>
					</div>
				</div>
				<!-- street view panel -->
				<div class="goa-gallery">
					<div class="goa-gallery-nav">
						<ul class="goa-gallery-menu">
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
							<li><a class="spot" href="#">墨西哥国家美术馆</a></li>
							<li><a class="spot" href="#">日本美术馆</a></li>
						</ul>
					</div>
					<div class="goa-gallery-panos">
						<div class="goa-gallery-pano" id="pano1">
							
						</div>
						<div class="goa-gallery-pano" id="pano2">
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>